<template>
  <el-dialog :visible.sync="isShow" @close="close" width="70%" class="upkeepDialog" :show-close='false' :closeOnClickModal='false' append-to-body>
    <span slot="title" class="dialog-title">
		  <span style = "font-size:13px;margin-right:8px;">{{title}}</span> {{upkeepRecordData.name}}
			<el-button  size="mini" @click="close" class="popupClose">关闭</el-button>
		</span>
    <div style="width:48%;float:left">
        <div class="inlineblock verticalmiddle">
          保养计划
        </div>
        <div class="inlineblock verticalmiddle informationItem">
          <el-input v-model="planName" disabled size="mini"></el-input>
        </div>
    </div>
    <div style="width:48%;float:right">
        <div class="inlineblock verticalmiddle">
          保养时间
        </div>
        <div class="inlineblock verticalmiddle informationItem">
          <el-date-picker v-model="executeDate"  type="date" :disabled="flag =='look'" placeholder="选择日期" size="mini" style="width:100%"
          :clearable="false" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
          </el-date-picker>
        </div>
    </div>
    <div v-if="xunhuanzhouqiValue||flag=='look'" style="height:calc(100% - 40px); margin-top: 35px;clear:both">
      <el-table :data="tableData6" size='mini' style="width: 100%;height:100%;" class="tableCon">
        <el-table-column type="index" width="50" label="序号">
        </el-table-column>
        <el-table-column prop="name" min-width="100" label="保养项">
          <template slot-scope="scope">
            <el-input size="mini" :disabled="true" v-model="scope.row.name"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="是否已保养" prop="checked">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.checked" :disabled="title !='仪器保养'"></el-checkbox>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <span slot="footer" class="dialog-footer" v-if="flag !='look'">
	  	 <el-button type="primary" @click="submit" size="mini">确定</el-button>
	    	<el-button @click="close" size="mini">取 消</el-button>
	  </span>
  </el-dialog>
</template>

<script>
  import { mapState } from 'vuex'

  export default {
    data() {
      return {
        isShow: true,
        tableData: [],
        tableData6: [],
        xunhuanzhouqi: [
          {
            value: '001',
            label: '周维护（每一周一次）'
          },
          {
            value: '002',
            label: '月维护（每一月一次）'
          },
          {
            value: '003',
            label: '年维护（每12月一次）'
          }
        ],
        xunhuanzhouqiValue: '001',
        planName: '',
        EquipmentMaintenanceList: [],
        executeDate:this.util.date(),
      }
    },
    computed: {
      biaoyangTableHeight() {
        return ((window.innerHeight - 90) * 0.8 - 250)
      }
    },
    props: { fRefId: String, showButton: Object, title: String, flag: String,upkeepRecordData:Object,selectrow:Object},
    mounted() {
      //		this.init()
       console.log(this.title)
      if(this.title == "维护任务详情"){
        console.log(this.selectrow)
        this.executeDate =  this.selectrow.executeDate
      }
      this.readPlanName()
      this.readEquipmentMaintenanceList()
    },
    methods: {
      //	init(){
      //		this.$http({
      //			 	apiUrl: 'resource/readMaintenance.htm',
      //		    method: 'get',
      //		    params: {id:this.fRefId},
      //			}).then(res=>{
      //				if(res.code == 0) {
      //					this.tableData = res.data
      //					console.log(res.data)
      //				}
      //			})
      //	},
      readEquipmentMaintenanceList() {
        let url, params;
        if (this.title == "添加维护任务") {
          url = 'resource/readEquipmentMaintenanceList.htm'
        } else {
          url = 'resource/readMaintenance.htm'
        }
        params = { fRef: this.fRefId };
        this.$http({
          apiUrl: url,
          method: 'post',
          params: params,
          isJson: false,
        }).then(res => {
          if (res.code == 0) {
            console.log(res)
            this.tableData6 = res.data;
            if (this.title == "添加维护任务") {
              this.tableData6 = res.data;
            } else {
              this.tableData6 = res.data.map((item) => {

                this.$set(item, 'checked', true)
                item.name = item.content;
                return item
              })
            }
            //					this.tableData6 = res.data.map((item)=>{return {name:item.name,checked:false}})
            //					this.planName = res.data.planName
          }
        })

      },
      readPlanName() {
        let params = { id: this.fRefId }
        this.$http({
          apiUrl: 'resource/readPlanName.htm',
          method: 'post',
          params: params,
          isJson: false,
        }).then(res => {
          if (res.code == 0) {
            console.log(res)
            this.planName = res.data.planName
          }
        })
      },
      close() {
        this.$parent.detailShow = false;
      },
      submit() {
        console.log(this.tableData6)
        this.addUsecheck()
        this.close()
      },
      addUsecheck() {
        //  	this.$parent.$parent.readMaintenanceList()
        let params = this.tableData6.map((item) => {
          if (item.checked == true) {
            return { name: item.name, fRef: this.fRefId, item: item.id, content: item.content, id: item.id,executeDate: this.executeDate + " 00:00:00"}
          }
        })
        params = params.filter(item => !!item === true)
        //  	console.log(s)
        //  	let params = this.tableData6.filter(item => item.checked==true)

        this.$http({
          apiUrl: 'resource/creatMaintrecordItem.htm',
          method: 'post',
          params: params,
          isJson: true,
        }).then(res => {
          if (res.code == 0) {
            this.$notify({
              showClose: true,
              message: '执行成功！',
              type: 'success',
              title:"成功"
            })
            this.$parent.$parent.readMaintenanceList()
          }
        })

      }
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  .upkeepDialog .el-dialog {
		margin-top: 10vh !important;
		height: 80%;
	}
	.upkeepDialog .el-dialog .el-dialog__body {
		height: calc(100% - 85px);
		padding: 15px;
	}



</style>
